<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         :title="formState.parentid?'编辑题目':'新增题目'" 
         @ok="handleOk" 
         @cancel="visible = false"
         :width="700"
         :dialogStyle="{top:'20px'}"
         >
         <a-form :form="form" class="increase-title-form" v-if="visible">
            <a-form-item label="问卷题目">
                <a-input
                placeholder="请输入问卷题目"
                v-decorator="['fwjtm', { initialValue:formState.fwjtm, rules: rules.fwjtm}]"/>
            </a-form-item>
            <a-form-item label="问卷题目类型">
                <div style="display: flex;align-items: center;margin-top: 5px;">
                    <compSelector
                        v-model="formState.fwjtmlx" 
                        :defaultValue="formState.fwjtmlx"
                        compType="Select"
                        dictionaryType="试卷题目类型"
                    />
                </div>
            </a-form-item>
            <a-form-item label="是否开启评分">
                <div style="display: flex;align-items: center;margin-top: 9px;">
                    <compSelector
                    v-model="formState.fsfkqpf" 
                    compType="Radio"
                    :defaultValue="formState.fsfkqpf"
                    :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    />
                </div>
            </a-form-item>
            <a-form-item label="评分最大值" v-if="formState.fsfkqpf == '是'">
                <div style="display: flex;align-items: center;margin-top: 5px;">
                    <a-input-number id="inputNumber" v-model="formState.fpfzdz" :min="1" :precision="0"  />
                </div>
            </a-form-item>
            
            <a-form-item label="是否存在选项">
                <div style="display: flex;align-items: center;">
                    <compSelector
                    v-model="formState.fsfczxx" 
                    compType="Radio"
                    :defaultValue="formState.fsfczxx"
                    :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    @selectHandleChange="fsfczxxSelectHandleChange"
                    />
                    <span style="font-size: 12px;color: #f5222d;" >（注：选项就为‘是’，修订意见为‘否’）</span>
                </div>
            </a-form-item>
            <a-form-item label="是否填写存在困难">
                <div style="display: flex;align-items: center;margin-top: 9px;">
                    <compSelector
                        v-model="formState.fsftxczkn" 
                        compType="Radio"
                        :defaultValue="formState.fsftxczkn"
                        :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    />
                </div>
            </a-form-item>
            <a-form-item label="是否填写修订意见">
                <div style="display: flex;align-items: center;margin-top: 9px;">
                    <compSelector
                    v-model="formState.fsftxxdyj" 
                    compType="Radio"
                    :defaultValue="formState.fsftxxdyj"
                    :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    @selectHandleChange="fsftxxdyjSelectHandleChange"
                    />
                    <span style="font-size: 12px;color: #f5222d;" >（注：修订意见为‘是’，选项就为‘否’）</span>
                </div>
            </a-form-item>
            <a-form-item label="是否填写意见">
                <div style="display: flex;align-items: center;margin-top: 9px;">
                    <compSelector
                    v-model="formState.fsftxyjjy" 
                    compType="Radio"
                    :defaultValue="formState.fsftxyjjy"
                    :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    />
                </div>
            </a-form-item>
            <a-form-item label="是否填写邮箱地址">
                <div style="display: flex;align-items: center;margin-top: 9px;">
                    <compSelector
                    v-model="formState.fsftxyxdz" 
                    compType="Radio"
                    :defaultValue="formState.fsftxyxdz"
                    :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"
                    />
                </div>
            </a-form-item>
        </a-form>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import { spcyWjWjjbxxAddWjtm, spcyWjWjjbxxEditWjtm } from './service/index'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            increaseTitleKey:null,
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fwjtm: [{
                    required: true,
                    message: '请输入问卷题目',
                    trigger: 'blur',
                }],
                fwjtmlx: [{
                    required: true,
                    message: '请输入问题类型',
                    trigger: 'blur',
                }],
            },
            optionsArr:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log(row)
            if(!row.fsfkqpf){
                row.fsfkqpf = '否'
            }
            if(!row.fpfzdz) row.fpfzdz = 1
            this.formState = row
            this.increaseTitleKey = Date.now()
        },
        fsfczxxSelectHandleChange(val){
            if(val == '是'){
                this.formState.fsftxxdyj = '否'
            }
        },
        fsftxxdyjSelectHandleChange(val){
            if(val == '是'){
                this.formState.fsfczxx = '否'
            }
        },
        handleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    //console.log(values)
                    let data = {
                        fsfczxx:this.formState.fsfczxx,
                        fsftxczkn:this.formState.fsftxczkn,
                        fsftxxdyj:this.formState.fsftxxdyj,
                        fsftxyjjy:this.formState.fsftxyjjy,
                        fsftxyxdz:this.formState.fsftxyxdz,
                        fwjjbxxid:this.formState.fwjjbxxid,
                        fwjtm:values.fwjtm,
                        fwjtmdbt:this.formState.fwjtmdbt,
                        fwjtmlx:this.formState.fwjtmlx,
                        fsfkqpf:this.formState.fsfkqpf,
                        fpfzdz:this.formState.fpfzdz,
                    }
                    if(this.formState.parentid){
                        data.id = this.formState.id 
                        spcyWjWjjbxxEditWjtm({...data,}).then(res=>{
                            if(res.code == 200){
                                this.$emit('refreshClick')
                                this.visible = false
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        spcyWjWjjbxxAddWjtm({...data}).then(res=>{
                            if(res.code == 200){
                                this.$emit('refreshClick')
                                this.visible = false
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang="less">
.increase-title-form{
    .ant-form-item{
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }
    .ant-form-item-label{
        width: 130px !important;
    }
    .ant-form-item-control-wrapper{
        flex: 1;
    }
}
</style>